<template>
  <div class="Share">
    <div class="share">
      <div class="title" v-html="obj.title"></div>
      <span class="content">{{ obj.content }}</span>
      <div class="info">
        <span>
          <img :src="imgHost + obj.author.avatar" alt="" />
          {{ obj.author.nickname }}
        </span>
        <span class="list">
          <span>{{ date }}</span>
          <span> <i class="iconfont icon-pinglun"></i> {{ obj.share }}</span>
          <span
            ><good-job
              style="font-size: 16px"
              :id="obj.id"
              :class="`${list.includes(obj.id) ? 'active' : ''}`"
            />{{ obj.star }}</span
          >
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import GoodJob from './GoodJob.vue'
export default {
  components: { GoodJob },
  data () {
    return {
      date: '',
      imgHost: 'http://hmmm.zllhyy.cn/',
      list: []
    }
  },
  props: {
    obj: {
      required: true
    }
  },
  created () {
    const res = Date.parse(this.obj.created_at)
    const date = dayjs(res).format('YYYY-MM-DD')
    this.date = date
    // console.log(this.obj);
    if (localStorage.getItem('goodList')) {
      this.list = JSON.parse(localStorage.getItem('goodList'))
    }
  }
}
</script>

<style lang="less" scoped>
.share {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  border-bottom: 1px solid #f4f5f6;
  background-color: #fff;
  padding-top: 1.25rem;
  .title {
    font-size: 1rem;
    color: #181a39;
    margin-bottom: 0.32rem;
  }
  .content {
    color: #545671;
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .info {
    padding-bottom: 20px;
    margin-top: 20px;
    font-size: 0.32rem;
    color: #b4b4bd;
    display: flex;
    justify-content: space-between;
    img {
      vertical-align: middle;
      height: 1.25rem;
      border-radius: 50%;
    }
    .list {
      i {
        vertical-align: middle;
      }
      span {
        margin-left: 1.25rem;
      }
      .active {
        color: #e40137 !important;
      }
    }
  }
}
</style>
